<template>
  <div :ref="domId" class="chart-container"></div>
</template>

<script lang="ts">
import { defineComponent, PropType } from 'vue';

import * as echarts from 'echarts/core';
import {
  TooltipComponent,
  TooltipComponentOption,
  LegendComponent,
  LegendComponentOption
} from 'echarts/components';
import { PieChart, PieSeriesOption } from 'echarts/charts';
import { LabelLayout } from 'echarts/features';
import { CanvasRenderer } from 'echarts/renderers';

echarts.use([
  TooltipComponent,
  LegendComponent,
  PieChart,
  CanvasRenderer,
  LabelLayout
]);

type EChartsOption = echarts.ComposeOption<
  TooltipComponentOption | LegendComponentOption | PieSeriesOption
>;

interface ChartData {
  value: number;
  name: string;
}

interface Dicts {
  label: string;
  value: string;
  color: string;
}

interface CountData {
  [key: string]: number;
}

const Component = defineComponent({
  props: {
    // 图表名称
    name: String,
    // 统计数据 - 通过API获取
    rowData: {
      type: Object as PropType<CountData>,
      required: true
    },
    // 图表数据
    dicts: {
      type: Array as PropType<Dicts[]>,
      required: true
    }
  },

  data() {
    return {
      // dom ID
      domId: 'chart-pie',
      // 图表数据
      chartData: [] as ChartData[]
    };
  },

  watch: {
    // 监听图表数据
    rowData: {
      handler(val) {
        // 过滤数据
        this.fillChartData(val);
        // 渲染图表
        this.renderChart();
      }
    }
  },

  methods: {
    // 渲染图表
    renderChart() {
      // 获取dom
      // const chartDom = document.getElementById(this.domId)!;
      const chartDom = this.$refs[this.domId] as HTMLElement;
      // 初始化dom
      const myChart = echarts.init(chartDom);
      // 配置图表数据
      let option: EChartsOption;

      // 设置图表legend
      const legendData = this.dicts.map((opt) => {
        return {
          name: opt.label,
          itemStyle: {
            color: opt.color
          }
        };
      });

      option = {
        tooltip: {
          trigger: 'item'
        },
        legend: {
          top: '5%',
          left: 'center',
          data: legendData
        },
        series: [
          {
            // 图表名称
            name: this.name,
            type: 'pie',
            top: '16',
            radius: ['40%', '64%'],
            avoidLabelOverlap: false,
            itemStyle: {
              borderRadius: 10,
              borderColor: '#fff',
              borderWidth: 2,
              color: ({ data }: any) => data.color
            },
            label: {
              //   show: false,
              //   position: 'center',
              formatter: '{b}: {c}'
            },
            // emphasis: {
            //   label: {
            //     show: true,
            //     fontSize: '24',
            //     fontWeight: 'bold'
            //   }
            // },
            // labelLine: {
            //   show: false
            // },
            data: this.chartData
          }
        ]
      };

      // 绘制图表
      option && myChart.setOption(option);
    },
    // 过滤接口数据
    fillChartData(data: CountData) {
      this.chartData = this.dicts.map((dict) => {
        return {
          name: dict.label,
          value: data[dict.value],
          color: dict.color
        };
      });
    }
  }
});

export default Component;
</script>

<style lang="scss" scoped>
.chart-container {
  height: 400px;
}
</style>
